<template>
    <div class="safe-area-bottom home-wrap">
        <div class="obligation_top">
            <div class="obligation_top_time">
                <div>
                    <img src="../../../../images/mine/icon_wanc.png" alt="">交易完成
                </div>
                <!-- <div>23:18</div> -->
            </div>
            <div class="logistics_info">
                <img src="../../../../images/mine/icon_wuliu.png" alt="">
              <div class="logistics_info_left">
                <div>订单已签收</div>
                <div>2020.3.3</div>
              </div>
              <van-icon name="arrow" size="0.3rem" color="#fff" class="logistics_info_icon"/>
            </div>
            <div class="obligation_top_address">
                <img src="../../../../images/mine/icon_adress.png" alt="">
                <div>
                    <div class="obligation_top_address_name">
                        名称 <i>1555555</i> <span>默认</span>
                    </div>
                    <div class="obligation_top_address_address">
                        地址
                    </div>
                </div>
            </div>
        </div>
        <div class="order_name">
            <!-- <div class="order_name_left"> -->
                <div class="order_name_left"> <img src="../../../../images/mine/shop.png" alt="">名称</div>
            <!-- </div> -->
            <!-- <div class="order_name_right">等待付款</div> -->
        </div>
        <div class="order_list">
            <img src="../../../../assets/qr.jpg" alt="">
            <div class="order_goods">
                <div class="order_goods_name">商品名称</div>
                <div class="order_goods_sku">规格</div>
                <div class="order_goods_price"><span>￥100</span> <span>x2</span></div>
            </div>
        </div>
        <!--  -->
        <div class="obligation_item">
            <div class="obligation_item_con">
                <div>商品金额：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>应返金额：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>订单编号：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>下单时间：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>支付时间：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>支付方式：</div>
                <div>￥666</div>
            </div>
        </div>
        <div class="obligation_bom">
            <div class="obligation_btn">
                <div class="obligation_btn_price"></div>
                <div>
                    <van-button class="order_pay_btn" size="small" round>删除订单</van-button>
                    <van-button class="order_pay_btn" size="small" round @click="getAfterSales">申请售后</van-button>
                    <van-button class="order_pay_btn" color="linear-gradient(to right, #FF5851, #E9011B)" size="small"
                        round>再次购买</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data() {
        return {
            
        }
    },
    methods: {
        getAfterSales() {
            this.$router.push({path: '/afterSales'})
        }
    },
}
</script>
<style lang="scss" scoped>
	.home-wrap{
		min-height: 100vh;
		background-color: #f5f5f5;
	}
.obligation_top {
    padding: 0.3rem;
    margin: 0 auto;
    background: #fff;
    // margin-top: 0.2rem;
    // border-bottom: 1px solid #999;

    .obligation_top_time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.3rem;
        div {
            img {
                width: 0.56rem;
                height: 0.56rem;
                margin-right: 0.1rem;
                vertical-align: middle;
            }
        }
    }
    .logistics_info{
        // width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        font-weight: bold;
        line-height: 0.4rem;
        // border: 0.01rem solid #999;
        background: #FFF3F2;
        border-radius: 0.16rem;

        padding: 0.32rem;
        margin-bottom: 0.4rem;
        img{
            width: 0.64rem;
            height: 0.64rem;
        }
        &_left{
            width: 70%;
            div:last-child{
                color: #999;
                font-weight: 500;
                font-size: 0.24rem;
            }
        }
        &_icon{
            font-weight: bold;
            margin-top: 0.3rem;
        }
        // &_right{
        //     width: 30%;
        //     text-align: right;
        //     span{
                
        //     }
        // }
    }
    .obligation_top_address {
        // background: #fff;
        font-size: 0.3rem;
        line-height: 0.5rem;
        display: flex;

        img {
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.3rem;
            margin-right: 0.3rem;
        }

        div {
            .obligation_top_address_name {
                font-weight: bold;
                font-size: 0.32rem;
                i{
                    font-style: normal;
                    font-weight: 500;
                    font-size: 0.28rem;
                    // margin: 0 0.2rem
                    color: #999999;
                }
                span {
                    font-weight: 500;
                    font-size: 0.28rem;
                    border: 0.01rem solid #F32A23;
                    padding: 0.02rem 0.05rem;
                    color: #F32A23;
                    border-radius: 0.02rem;
                }
            }
            .obligation_top_address_address{
                font-size: 0.28rem;
                color: #999;

            }
        }
    }
}

.order_name {
    background: #fff;
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem;
        margin-top: 0.16rem;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        img {
            width: 0.5rem;
            height: .5rem;
            vertical-align: middle;
            margin-right: .16rem
        }

        &_left {
            font-weight: bold;
        }

        &_right {
            font-size: 0.25rem;
        }
    }

    .order_list {
    background: #fff;
    padding: 0 0.32rem 0.2rem 0.32rem;
    display: flex;
    justify-content: space-between;
    // border-bottom: 0.01rem solid #999;

    img {
        width: 1.8rem;
    }

    .order_goods {
        width: 70%;
        font-size: 0.3rem;
        line-height: 0.6rem;

        &_name {
            font-size: 0.3rem;
        }

        &_sku {
            font-size: 0.28rem;
            color: #999;
        }

        &_price {
            font-size: 0.35rem;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            color: #F32A23;
            span:last-child {
                font-weight: 500;
                font-size: 0.25rem;
                color: #999;
            }
        }
    }
}
.obligation_item {
    padding: 0.2rem;
    margin-top: 0.2rem;
    background: #fff;
    .obligation_item_con {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        line-height: 0.6rem;
        div:last-child {
            color: #999999;
        }
    }
}

.obligation_bom {
    width: 100%;
    position: fixed;
    bottom: 0;
    // border-top: 0.01rem solid #999;
    background: #fff;

    .obligation_btn {
        padding: 0.2rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.3rem;

        .obligation_btn_price {
            margin-top: 0.1rem;
        }

        // position: absolute;
        // bottom: 0;
        div {

            .order_pay_btn {
                margin-left: 0.2rem;
            }
        }
    }
}
</style>